import React from "react";
import {Link} from 'react-router-dom'
import logo from '../../images/logo.png'
import frame from '../../style/frame.less';
import MenuItem from "./menu-item";

class Header extends React.Component {

    constructor(props) {
        super(props);

        this.label = {
            float: 'right',
            minWidth: '100px',
            height: 'inherit',
            lineHeight: '5.5vh',
            padding: '0 10px',
            color: 'white',
            fontSize: '0.14rem'
        };

        this.state = {
            links: this.props.links,
            system: this.props.system,
            user: this.props.user,
            showMobileMenu: false,
            mobileMenuItems: [
                {
                    id: "product",
                    name: "产品",
                    childItem: [
                        {
                            id: "calculate",
                            name: "计算",
                            childItem: [
                                {
                                    id: "ecs",
                                    name: "云服务器ECS",
                                    url: "/ecs"
                                },
                                {
                                    id: "lightserver",
                                    name: "量应用服务器",
                                    url: "/lightserver"
                                },
                                {
                                    id: "gpu",
                                    name: "GPU云服务器",
                                    url: "/gpu"
                                },
                                {
                                    id: "fpga",
                                    name: "FPGA云服务器",
                                    url: "/fpga"
                                },
                                {
                                    id: "exclusiveHost",
                                    name: "专属宿主机",
                                    url: "/exclusiveHost"
                                },
                                {
                                    id: "imageManagement",
                                    name: "镜像管理",
                                    url: "/imageManagement"
                                }
                            ]
                        },
                        {
                            id: "storage",
                            name: "存储",
                            childItem: [
                                {
                                    id: "oss",
                                    name: "对象存储OSS",
                                    url: "/oss"
                                },
                                {
                                    id: "blockStorage",
                                    name: "块存储Block Storage",
                                    url: "/blockStorage"
                                },
                                {
                                    id: "nas",
                                    name: "分布式文件存储系统NAS",
                                    url: "/nas"
                                }
                            ]
                        },
                        {
                            id: "network",
                            name: "网络",
                            childItem: [
                                {
                                    id: "vpc",
                                    name: "专属私有网络VPC",
                                    url: "/vpc"
                                },
                                {
                                    id: "slb",
                                    name: "负载均衡服务",
                                    url: "/slb"
                                },
                                {
                                    id: "nat",
                                    name: "NAT服务",
                                    url: "/nat"
                                },
                                {
                                    id: "dns",
                                    name: "DNS域名服务",
                                    url: "/dns"
                                },
                                {
                                    id: "ntp",
                                    name: "NTP服务",
                                    url: "/ntp"
                                }
                            ]
                        },
                        {
                            id: "database",
                            name: "数据库",
                            childItem: [
                                {
                                    id: "mysql",
                                    name: "MySQL云服务器",
                                    url: "/mysql"
                                },
                                {
                                    id: "mysqlCluster",
                                    name: "MySQL Cluster云服务器",
                                    url: "/mysqlCluster"
                                },
                                {
                                    id: "postgreSql",
                                    name: "PostgreSQL云服务器",
                                    url: "/postgreSql"
                                },
                                {
                                    id: "mongoDB",
                                    name: "MongoDB云服务器",
                                    url: "/mongoDB"
                                },
                                {
                                    id: "redis",
                                    name: "Redis云服务器",
                                    url: "/redis"
                                },
                                {
                                    id: "redisCluster",
                                    name: "Redis Cluster云服务器",
                                    url: "/redisCluster"
                                },
                                {
                                    id: "memcached",
                                    name: "Memcached云服务器",
                                    url: "/memcached"
                                }
                            ]
                        },
                        {
                            id: "bigDataService",
                            name: "大数据服务",
                            childItem: [
                                {
                                    id: "hadoop",
                                    name: "Hadoop服务",
                                    url: "/hadoop"
                                },
                                {
                                    id: "spark",
                                    name: "Spark服务",
                                    url: "/spark"
                                }
                            ]
                        },
                        {
                            id: "serviceRegistrationAndDiscovery",
                            name: "服务注册发现服务",
                            childItem: [
                                {
                                    id: "zookeeper",
                                    name: "Zookeeper",
                                    url: "/zookeeper"
                                },
                                {
                                    id: "etcd",
                                    name: "Etcd",
                                    url: "/etcd"
                                }
                            ]
                        },
                        {
                            id: "rpcService",
                            name: "RPC服务",
                            childItem: [
                                {
                                    id: "grpc",
                                    name: "gRPC",
                                    url: "/grpc"
                                },
                                {
                                    id: "thrift",
                                    name: "Thrift",
                                    url: "/thrift"
                                }
                            ]
                        },
                        {
                            id: "distributedService",
                            name: "分布式服务框架",
                            childItem: [
                                {
                                    id: "dubbo",
                                    name: "Dubbo",
                                    url: "/dubbo"
                                },
                                {
                                    id: "tars",
                                    name: "Tars",
                                    url: "/tars"
                                },
                                {
                                    id: "springcloud",
                                    name: "SpringCloud",
                                    url: "/springcloud"
                                }
                            ]
                        },
                        {
                            id: "messageQueueService",
                            name: "消息队列服务",
                            childItem: [
                                {
                                    id: "rabbitmq",
                                    name: "RabbitMQ",
                                    url: "/rabbitmq"
                                },
                                {
                                    id: "zeromq",
                                    name: "ZeroMQ",
                                    url: "/zeromq"
                                },
                                {
                                    id: "kafka",
                                    name: "Kafka",
                                    url: "/kafka"
                                },
                                {
                                    id: "activemq",
                                    name: "ActiveMQ",
                                    url: "/activemq"
                                }
                            ]
                        },
                        {
                            id: "bpmBusiness",
                            name: "BPM业务流程建模服务",
                            childItem: [
                                {
                                    id: "activiti",
                                    name: "Activiti",
                                    url: "/activiti"
                                },
                                {
                                    id: "jBPM",
                                    name: "jBPM",
                                    url: "/jBPM"
                                }
                            ]
                        },
                        {
                            id: "logFramework",
                            name: "大型分布式日志框架",
                            childItem: [
                                {
                                    id: "Kafka_cluster",
                                    name: "Kafka大型分布式日志框架",
                                    url: "/Kafka_cluster"
                                },
                                {
                                    id: "ELK",
                                    name: "ELK分布式日志中心",
                                    url: "/ELK"
                                },
                                {
                                    id: "Flume",
                                    name: "Flume海量日志聚合系统",
                                    url: "/Flume"
                                },
                                {
                                    id: "Scribe",
                                    name: "Scribe日志服务系统",
                                    url: "/Scribe"
                                }
                            ]
                        },
                        {
                            id: "safeAndPermissions",
                            name: "安全与权限",
                            childItem: [
                                {
                                    id: "firewall",
                                    name: "防火墙",
                                    url: "/firewall"
                                },
                                {
                                    id: "webFirewall",
                                    name: "WEB应用防火墙",
                                    url: "/webFirewall"
                                },
                                {
                                    id: "DDos",
                                    name: "DDoS攻击防护",
                                    url: "/DDos"
                                },
                                {
                                    id: "SSL",
                                    name: "SSL证书服务",
                                    url: "/SSL"
                                },
                                {
                                    id: "accountSecurity",
                                    name: "账户安全",
                                    url: "/accountSecurity"
                                },
                                {
                                    id: "subAccountManagement",
                                    name: "子账户管理",
                                    url: "/subAccountManagement"
                                },
                                {
                                    id: "sqlInjection",
                                    name: "SQL注入扫描服务",
                                    url: "/sqlInjection"
                                },
                                {
                                    id: "weakPassword",
                                    name: "弱口令漏洞扫描服务",
                                    url: "/weakPassword"
                                },
                                {
                                    id: "Fuzz",
                                    name: "Fuzz攻击防护服务",
                                    url: "/Fuzz"
                                },
                                {
                                    id: "cloudOS",
                                    name: "云OS安全加固服务",
                                    url: "/cloudOS"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "solution",
                    name: "解决方案",
                    url: "/solution",
                    childItem: []
                },
                {
                    id: "case",
                    name: "成功案例",
                    url: "/case",
                    childItem: []
                },
                {
                    id: "partner",
                    name: "合作伙伴",
                    url: "",
                    childItem: []
                },
                {
                    id: "serviceAndSupport",
                    name: "服务与支持",
                    url: "",
                    childItem: [
                        {
                            id: "helpAndDocument",
                            name: "帮助与文档",
                            url: "",
                            childItem: [
                                {
                                    id: "userGuide",
                                    name: "用户指南",
                                    url: "",
                                    childItem: []
                                },
                                {
                                    id: "commonProblems",
                                    name: "常见问题",
                                    url: "",
                                    childItem: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "contactus",
                    name: "联系我们",
                    url: "/contactus",
                    childItem: []
                },
                {
                    id: "more",
                    name: "更多",
                    url: "",
                    childItem: [
                        {
                            id: "news",
                            name: "相关新闻",
                            url: "",
                            childItem: [
                                {
                                    id: "enterpriseDynamic",
                                    name: "企业动态",
                                    url: "",
                                    childItem: []
                                },
                                {
                                    id: "productRelease",
                                    name: "产品发布",
                                    url: "",
                                    childItem: []
                                },
                                {
                                    id: "safetyNotice",
                                    name: "安全通告",
                                    url: "",
                                    childItem: []
                                }
                            ]
                        },
                        {
                            id: "company",
                            name: "公司",
                            url: "",
                            childItem: [
                                {
                                    id: "contactus",
                                    name: "联系我们",
                                    url: "/contactus",
                                    childItem: []
                                },
                                {
                                    id: "aboutus",
                                    name: "关于我们",
                                    url: "/aboutus",
                                    childItem: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "register",
                    name: "注册",
                    url: "",
                    childItem: []
                },
                {
                    id: "login",
                    name: "登录",
                    url: "",
                    childItem: []
                }
            ]
        };
    }

    showMobileMenuClickHandler() {
        const {showMobileMenu} = this.state;
        $("body").css("overflow", !showMobileMenu ? "hidden" : "inherit")
        this.setState({showMobileMenu: !showMobileMenu})
    }

    renderShowLoginInfo = () => {
        const value = localStorage.getItem('username');
        return (value != undefined && value!='undefined') ? (
            <div>
                <div className={frame.label}>
                    <a href="/login" onClick={this.doLogout}>退出</a>
                </div>
                <div className={frame.label}>
                    {value}
                </div>
            </div>
        ) : (
            <div>
                <div className={frame.label}>
                    <a href="/register">注册</a>
                </div>

                <div className={frame.label}>
                    <a href="/login">登录</a>
                </div>
            </div>

        );
    }

    doLogout = () =>{
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        localStorage.removeItem('username');
        localStorage.removeItem('currentAuthority');
    }

    render() {
        return (
            <div className={frame.topPanel}>
                <div className={frame.logo}>
                    <Link to="/">
                        <img src={logo} alt=""/>
                        <div className={frame.logTitle}>{this.props.system.name}</div>
                    </Link>
                </div>

                <div className={frame.headNav}>
                    <div className={`${frame.headNavTitle}`}>产品</div>
                    <div className={`${frame.fade} ${frame.headNavMenu}`}>
                        <div className={`${frame.block} ${frame.row}`}>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        计算
                                    </div>
                                    <ul>
                                        <li><a href="/ecs">云服务器ECS</a></li>
                                        <li><a href="/lightserver">轻量应用服务器</a></li>
                                        <li><a href="/gpu">GPU云服务器</a></li>
                                        <li><a href="/fpga">FPGA云服务器</a></li>
                                        <li><a href="/exclusiveHost">专属宿主机</a></li>
                                        <li><a href="/imageManagement">镜像管理</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        存储
                                    </div>
                                    <ul>
                                        <li><a href="/oss">对象存储OSS</a></li>
                                        <li><a href="/blockStorage">块存储Block Storage</a></li>
                                        <li><a href="/nas">分布式文件存储系统NAS</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        网络
                                    </div>
                                    <ul>
                                        <li><a href="/vpc">专属私有网络VPC</a></li>
                                        <li><a href="/slb">负载均衡服务</a></li>
                                        <li><a href="/nat">NAT服务</a></li>
                                        <li><a href="/dns">DNS域名服务</a></li>
                                        <li><a href="/ntp">NTP服务</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        数据库
                                    </div>
                                    <ul>
                                        <li><a href="/mysql">MySQL云服务器</a></li>
                                        <li><a href="/mysqlCluster">MySQL Cluster云服务器</a></li>
                                        <li><a href="/postgreSql">PostgreSQL云服务器</a></li>
                                        <li><a href="/mongoDB">MongoDB云服务器</a></li>
                                        <li><a href="/redis">Redis云服务器</a></li>
                                        <li><a href="/redisCluster">Redis Cluster云服务器</a></li>
                                        <li><a href="/memcached">Memcached云服务器</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        大数据服务
                                    </div>
                                    <ul>
                                        <li><a href="/hadoop">Hadoop服务</a></li>
                                        <li><a href="/spark">Spark服务</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        服务注册发现服务
                                    </div>
                                    <ul>
                                        <li><a href="/zookeeper">Zookeeper</a></li>
                                        <li><a href="/etcd">Etcd</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        RPC服务
                                    </div>
                                    <ul>
                                        <li><a href="/grpc">gRPC</a></li>
                                        <li><a href="/thrift">Thrift</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        分布式服务框架
                                    </div>
                                    <ul>
                                        <li><a href="/dubbo">Dubbo</a></li>
                                        <li><a href="/tars">Tars</a></li>
                                        <li><a href="/springcloud">SpringCloud</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        消息队列服务
                                    </div>
                                    <ul>
                                        <li><a href="/rabbitmq">RabbitMQ</a></li>
                                        <li><a href="/zeromq">ZeroMQ</a></li>
                                        <li><a href="/kafka">Kafka</a></li>
                                        <li><a href="/activemq">ActiveMQ</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        BPM业务流程建模服务
                                    </div>
                                    <ul>
                                        <li><a href="/activiti">Activiti</a></li>
                                        <li><a href="/jBPM">jBPM</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        大型分布式日志框架
                                    </div>
                                    <ul>
                                        <li><a href="/Kafka_cluster">Kafka大型分布式日志框架</a></li>
                                        <li><a href="/ELK">ELK分布式日志中心</a></li>
                                        <li><a href="/Flume">Flume海量日志聚合系统</a></li>
                                        <li><a href="/Scribe">Scribe日志服务系统</a></li>
                                    </ul>
                                </div>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        安全与权限
                                    </div>
                                    <ul>
                                        <li><a href="/firewall">防火墙</a></li>
                                        <li><a href="/webFirewall">WEB应用防火墙</a></li>
                                        <li><a href="/DDos">DDoS攻击防护</a></li>
                                        <li><a href="/SSL">SSL证书服务</a></li>
                                        <li><a href="/accountSecurity">账户安全</a></li>
                                        <li><a href="/subAccountManagement">子账户管理</a></li>
                                        <li><a href="/sqlInjection">SQL注入扫描服务</a></li>
                                        <li><a href="/weakPassword">弱口令漏洞扫描服务</a></li>
                                        <li><a href="/Fuzz">Fuzz攻击防护服务</a></li>
                                        <li><a href="/cloudOS">云OS安全加固服务</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className={frame.headNav}>
                    <Link to="/solution">
                        <div className={`${frame.headNavTitle}`}>解决方案</div>
                    </Link>
                </div>

                <div className={frame.headNav}>
                    <Link to="/case">
                        <div className={`${frame.headNavTitle}`}>成功案例</div>
                    </Link>
                </div>

                <div className={frame.headNav}>
                    <div className={`${frame.headNavTitle}`}>合作伙伴</div>
                </div>


                <div className={frame.headNav}>
                    <div className={`${frame.headNavTitle}`}>服务与支持</div>
                    <div className={`${frame.fade} ${frame.headNavMenu}`}>
                        <div className={`${frame.block} ${frame.row}`}>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        在线报价系统
                                    </div>
                                    <ul>
                                        <li><a href="/finance">财税云</a></li>
                                        <li><a href="">教学云</a></li>
                                        <li><a href="">电商云</a></li>
                                    </ul>
                                    <div>
                                        帮助与文档
                                    </div>
                                    <ul>
                                        <li><a href="">用户指南</a></li>
                                        <li><a href="">常见问题</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className={frame.headNav}>
                    <Link to="/contactus">
                        <div className={`${frame.headNavTitle}`}>联系我们</div>
                    </Link>
                </div>

                <div className={frame.headNav}>
                    <div className={`${frame.headNavTitle}`}>更多</div>
                    <div className={`${frame.fade} ${frame.headNavMenu}`}>
                        <div className={`${frame.block} ${frame.row}`}>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        相关新闻
                                    </div>
                                    <ul>
                                        <li><a href="">企业动态</a></li>
                                        <li><a href="">产品发布</a></li>
                                        <li><a href="">安全通告</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div className={frame.item5}>
                                <div className={frame.headNavMenuItem}>
                                    <div>
                                        公司
                                    </div>
                                    <ul>
                                        <li><a href="/contactus">联系我们</a></li>
                                        <li><a href="/aboutus">关于我们</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {this.renderShowLoginInfo()}
                <div className={frame.mobileMenu}>
                    <label onClick={this.showMobileMenuClickHandler.bind(this)}><i
                        className={`${frame.mobileMenuIcon} ${"fa fa-navicon fa-2x"}`}/></label>
                    <div
                        className={` ${frame.mobileMenuContent} ${this.state.showMobileMenu ? frame.mobileMenuContentShow : ''}`}>
                        {
                            this.state.mobileMenuItems.map((v, k) => {
                                return (
                                    <MenuItem key={"menu_" + k} menuItem={v}
                                              onMenuItemClick={this.showMobileMenuClickHandler.bind(this)}/>
                                )
                            })
                        }
                    </div>
                    <div className={`${frame.menuModal}  ${this.state.showMobileMenu ? frame.menuModalShow : ''}`}
                         onClick={this.showMobileMenuClickHandler.bind(this)}/>
                </div>

                {/* {this.state.links.map((item, index) => {
                    return (
                        <div key={index} style={this.label}>
                            {item}
                        </div>
                    )
                })}*/}

                <div style={{clear: 'both'}}></div>
            </div>
        )
    }
}

export default Header
